
<!DOCTYPE html>
<html>
<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properties -->
    <title>Resitry to your - Semantic</title>
    <link rel="stylesheet" type="text/css" href="/css/semantic.min.css">
    <!--    <link rel="stylesheet" type="text/css" href="../dist/components/site.css">-->

    <!--    <link rel="stylesheet" type="text/css" href="../dist/components/container.css">-->
    <!--    <link rel="stylesheet" type="text/css" href="../dist/components/grid.css">-->
    <!--    <link rel="stylesheet" type="text/css" href="../dist/components/header.css">-->

    <script src="/js/jquery-3.6.0.js"></script>
    <script src="/js/semantic.min.js"></script>
    <!--    <script src="../dist/components/transition.js"></script>-->

    <style type="text/css">
        body {
            background: radial-gradient(circle, white, #59aea6, #167269);
            height: 100vh; /* 必须要有宽度 */
            background-size: cover;
        }
        body > .grid {
            height: 100%;
        }
        .image {
            margin-top: -100px;
        }
        .column {
            max-width: 450px;
        }
        .box {
            width:450px;
            padding:40px;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            position:absolute;
            background-color:  rgba(255,255,255,0.13);
            text-align: center;
        }

        .box input[type="text"],.box input[type="password"] {
            background: none;
            display: block;
            text-align: center;
            border:0;
            margin:20px auto;
            border:2px solid #2980b9;
            padding:14px 10px;
            width:200px;
            outline:none;
            color:white;
            border-radius: 24px;
            transition: 0.5s;
        }

        .box input[type="text"]:focus,.box input[type="password"]:focus {
            width:280px;
            border-color:#3498db;
        }

        .box input[type="submit"] {
            color:white;
            background: none;
            display: block;
            text-align: center;
            border:0;
            margin:20px auto;
            border:2px solid #2ecc71;
            padding:14px 10px;
            cursor:pointer;
            width:180px;
            outline:none;
            border-radius: 24px;
            transition: 0.25s;
        }

        .box input[type="submit"]:hover{
            background-color: #2ecc71;
        }

        h1 {
            color:#ecf0f1;
        }


    </style>
    <script>
        $(document)
            .ready(function() {
                $('.ui.form')
                    .form({
                        fields: {
                            email: {
                                identifier  : 'email',
                                rules: [
                                    {
                                        type   : 'empty',
                                        prompt : 'Please enter your e-mail'
                                    },
                                    {
                                        type   : 'email',
                                        prompt : 'Please enter a valid e-mail'
                                    }
                                ]
                            },
                            password: {
                                identifier  : 'password',
                                rules: [
                                    {
                                        type   : 'empty',
                                        prompt : 'Please enter your password'
                                    },
                                    {
                                        type   : 'length[6]',
                                        prompt : 'Your password must be at least 6 characters'
                                    }
                                ]
                            }
                        }
                    })
                ;
            })
        ;
    </script>
</head>
<body>

<div class="ui middle aligned center aligned grid">
    <div class="column">

        <form class="box" method="post">
            <h1>注册</h1>
            <input type="text" name="email" id="email"  placeholder="E-mail address">
            <input type="password" id="password"  name="password" placeholder="Password">
            <input type="password" name="repassword" id="repassword" placeholder="Password">
            <div class="ui fluid large teal submit button" id="registry">注册</div>
            <br>
            <font face="楷体" color="#f0ffff">已有账号?</font> <a href="/login"><font face="楷体">登  录</font></a>
        </form>
    </div>
</div>

<script type="text/javascript" charset="UTF-8">
    //注册账号
    $("#registry").on("click",function() {
        $.ajax({
            url:"/user/create",
            type:"POST",
            data:{
                email: $("#email").val(),
                password: $("#password").val()
            },
            resultType:"JSON",
            success: function (result) {
                alert(result.message);

            },
            error:function (result) {

            }
        })
    })

</script>

</body>

</html>
